<template>
	<div id="poster_add" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				新建海报
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="panel_content">
				<div class="poster" :style="{backgroundImage: 'url('+param.backgroundImg+')'}">
					<div class="poster_logo" v-show="param.logoImg" id="poster_logo" :style="{left:param.logoLeft+'rem', top:param.logoTop+'rem', backgroundImage: 'url('+param.logoImg+')'}"></div>
					<div class="poster_theme">{{param.posterTheme}}</div>
					<div class="poster_explain">{{param.explanation}}</div>
					<div class="poster_qrCode" :id="qrCodeId" :style="{left:param.qrCodeLeft+'rem', top:param.qrCodeTop+'rem'}">
						<div class="poster_qrCode_mask">
							<div>二维码</div>
							<div>展示区</div>
						</div>
					</div>
				</div>
				<div class="form">
					<div class="row">
						<label class="label">
							<span>*</span>
							海报名称
						</label>
						<el-input v-model="param.posterName" id="posterName" style="width: 4.2rem;" 
								  maxLength="18" placeholder="请输入海报名称" clearable></el-input>
					</div>
					
					<div class="row">
						<label class="label">
							海报主题
						</label>
						<el-input v-model="param.posterTheme" id="posterTheme" style="width: 4.2rem;" 
								  maxLength="18" placeholder="请输入海报主题" clearable></el-input>
					</div>
					
					<div class="row2">
						<label class="label" style="vertical-align: top;">
							说明文字
						</label>
						<el-input v-model="param.explanation" id="explanation" type="textarea" style="width: 4.2rem;" 
								  maxLength="100" placeholder="请输入说明文字" :rows="5" clearable></el-input>
					</div>
					
					<div class="row">
						<label class="label">
							logo图上传
						</label>
						<div class="upload_btn" @click="uploadLogo()">立即上传</div>
						<input type="file" id="logo_file" accept="image/jpeg,image/jpg,image/png" hidden />
						<i class="el-icon-error cancel_btn" v-if="param.logoImg" @click="param.logoImg=''"></i>
						<span class="tips" v-else>推荐 116*116 或以上分辨率的图片</span>
					</div>
					
					<div class="row">
						<label class="label">
							<span>*</span>
							背景图上传
						</label>
						<div class="upload_btn" @click="uploadImg()">立即上传</div>
						<input type="file" id="background_file" accept="image/jpeg,image/jpg,image/png" hidden />
						<i class="el-icon-error cancel_btn" v-if="param.backgroundImg" @click="param.backgroundImg=''"></i>
						<span class="tips" v-else>推荐 750*1334 或以上分辨率的图片</span>
					</div>
					
					<div class="row">
						<label class="label">
							<span>*</span>
							扫码后页面链接
						</label>
						<el-input v-model="param.qrCode" id="qrCode" style="width: 4.2rem;"
								   maxLength="200" placeholder="请输入活动链接" clearable></el-input>
					</div>
					
					<div class="btn_div">
						<div class="btn_cancel" style="margin-right: 0.6rem;" @click="recover()">恢复原始</div>
						<div class="btn_sure" @click="sure()">确 认</div>
						<div class="btn_cancel" @click="cancel()">取 消</div>
					</div>
				</div>
			</div>
			
		</div>
	
	</div>
</template>

<script>
import QRCode from 'qrcodejs2'; // 引入qrcode

var vm,user;
var disX=0, disY=0; //移动时鼠标里移动块的顶部左部边距
var $logo,$qrCode; //logo图,二维码元素
var $logoFile,$backgroundFile; //logo文件input，背景图文件input

var param = {
	posterName : "",
	posterTheme : "海报主题",
	explanation : "说明文字内容",
	logoImg : "",
	backgroundImg : "",
	qrCode : "",
	logoLeft : 0.18,
	logoTop : 0.18,
	qrCodeLeft : 0.87,
	qrCodeTop: 3.87,
	campusId : "",
	orgId : "",
	_wait : ""
}
export default {
	data : function() {
		return {
			show : false,
			open : false,
			param : tool.clone(param),
			qrCodeObj : null, //二维码对象
			qrCodeId : tool.uuid(), //二维码容器id 
		}
	},
	methods : {
		init : function() {
			vm.show = true;
			vm.open = true;
			vm.param = tool.clone(param);
			
//			vm.qrCodeChange();
		},
		recover : function() {
			tool.confirm('将恢复到原始状态并不可撤销，是否继续?', '提示', {
	          	confirmButtonText: '确定',
	          	cancelButtonText: '取消',
	          	type: 'warning'
	        }).then(() => {
	          	vm.param = tool.clone(param);
	        }).catch(() => {
	        })
			
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
		},
		sure : function() {
			
			//验证规则
			var rules = [{
				judge : vm.param.posterName,
				focus : $("#poster_add #posterName"),
				tips : "请输入海报名称"
			},{
				judge : vm.param.backgroundImg,
				tips : "请上传背景图"
			},{
				judge : vm.param.qrCode,
				focus : $("#poster_add #qrCode"),
				tips : "请输入活动链接"
			},];
			
			if(!tool.validate(rules)) {
				return;
			}
			vm.param.campusId = vm.$store.state.campusId;
			vm.param.orgId = user.orgId;
				
			api.posterAdd(vm.param).then(function(data) {
				tool.message({ showClose: true, message: "新建成功", type: 'success' });
				vm.$emit('callback');
			    vm.cancel();
			});
			
		},
		uploadLogo : function() {
			$logoFile.click();
		},
		uploadImg : function() {
			$backgroundFile.click();
		},
//		qrCodeChange : function() { 
//			vm.qrCodeObj.clear(); // 清除二维码
//			vm.qrCodeObj.makeCode(vm.param.qrCode); // 生成另外一个二维码
//		},
		logoDown : function(ev) {
			//获取鼠标与容器顶部左部的距离
            disX = ev.clientX - $logo.offsetLeft;
            disY = ev.clientY - $logo.offsetTop;
            document.onmousemove = vm.logoMove;
            document.onmouseup = vm.mouseUp;
		},
		qrCodeDown : function(ev) {
			//获取鼠标与容器顶部左部的距离
			disX = ev.clientX - $qrCode.offsetLeft;
            disY = ev.clientY - $qrCode.offsetTop;
            document.onmousemove = vm.qrCodeMove;
            document.onmouseup = vm.mouseUp;
		},
		mouseUp : function() {
			document.onmousemove = null;
            document.onmouseup = null;
		},
		logoMove : function(ev) {
			var left = (ev.clientX - disX)/rem;
            var top = (ev.clientY - disY)/rem;
            
            if(left<0) {
            	left = 0;
            }
            if(left > 3.17){
            	left = 3.17;
            }
            if(top<0) {
            	top = 0;
            }
            if(top > 6.09){
            	top = 6.09;
            }
            vm.param.logoLeft = left;
            vm.param.logoTop = top;
		},
		qrCodeMove : function(ev) {
			var left = (ev.clientX - disX)/rem;
            var top = (ev.clientY - disY)/rem;
            
            if(left<0) {
            	left = 0;
            }
            if(left > 1.75){
            	left = 1.75;
            }
            if(top<0) {
            	top = 0;
            }
            if(top > 4.67){
            	top = 4.67;
            }
            vm.param.qrCodeLeft = left;
            vm.param.qrCodeTop = top;
		},
	},
	mounted : function() {
		//左侧的logo和二维码元素
		$logo = $("#poster_add #poster_logo")[0];
		$qrCode = $("#"+vm.qrCodeId)[0];
		//绑定鼠标按下事件
		$logo.onmousedown = vm.logoDown;
		$qrCode.onmousedown = vm.qrCodeDown;
		
		//二维码不存在,创建一个空的二维码
		vm.qrCodeObj = new QRCode(vm.qrCodeId, {
			width: 1.6*rem,
			height: 1.6*rem,
			text: " "
		});
		
		//右侧的logo和背景图文件上传input
		$logoFile = $("#poster_add #logo_file");
		$backgroundFile = $("#poster_add #background_file");
		//绑定文件选择事件
		$logoFile.change(function(){
			let f = $logoFile[0].files[0];
			//没有文件,直接结束
			if(!f) {
				return;
			}
			var param = new FormData();
			param.append("file",f);
			//上传文件
			api.uploadFile(param).then(function(data){
				//清空文件选择框,保存参数
				$logoFile[0].value = ''; 
				vm.param.logoImg = data.url;
			})
		})
		$backgroundFile.change(function(){
			let f = $backgroundFile[0].files[0];
			//没有文件,直接结束
			if(!f) {
				return;
			}
			var param = new FormData();
			param.append("file",f);
			//上传文件
			api.uploadFile(param).then(function(data){
				//清空文件选择框,保存参数
				$backgroundFile[0].value = ''; 
				vm.param.backgroundImg = data.url;
			})
		})
		
	},
	created : function() {
		vm = this;
		user = tool.getItem(lsKey.user, true);
	}
}
</script>
<style lang="scss">
	#poster_add {
		.el-input__inner {
			border-radius: 0.04rem;
			font-size: 0.14rem;
			color: #666666;
			height: 0.4rem;
			line-height: 0.4rem;
		}
		/*.el-input__icon {
			line-height: 0.4rem;
		}*/
		.el-textarea__inner {
			font-family: "微软雅黑";
			font-size: 0.14rem;
			resize:none;
		}
	}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped lang="scss" src="@keer/style/operation_manage/poster_add.css"></style>
<style scoped>
	.panel {
		width: 10.4rem;	
		letter-spacing: 0;
		margin-bottom: 0.2rem
	}
	.btn_div {
		/*padding: 2.32rem 0 0 0;*/
		padding: 2.1rem 0 0 0;
	}
</style>